<template>
  <div class="music_detail">
    <BaseInfo :baseInfo="baseInfo" @playMusic="playMusic" @collector="collector"></BaseInfo>
    <div class="music_tabs">
      <el-tabs v-model="activeName">
        <!-- 歌曲列表 -->
        <el-tab-pane label="歌曲列表" name="music">
          <SongLists ref="songList" :musicList="musicList" :lines="lines"></SongLists>
        </el-tab-pane>
        <!-- 评论 -->
        <el-tab-pane :label="commentCount" name="comment ">
          <comment :id="id" :commentList="commentList" :commnetType="commnetType"></comment>
          <!-- 分页 -->
          <div class="pagination">
            <el-pagination background @current-change="handleCurrentChange" :current-page.sync="offset" :page-size="20" layout="prev, pager, next, jumper" :total="total"> </el-pagination>
          </div>
        </el-tab-pane>
        <el-tab-pane label="喜欢这个歌单的人" name="third">
          <div class="sub_main">
            <ul>
              <li class="sub_li" v-for="(item, index) in subscribeList" :key="index">
                <el-avatar :size="50" :src="item.avatarUrl"></el-avatar>
                <div class="sub_name">{{ item.nickname }}</div>
              </li>
            </ul>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { _getMusicDetail, BaseObj, _getSongsDetail, SongDetail, _getCommentRes, _getPlaylistSubscribes, _getSubscribe } from '../../network/detail'
import BaseInfo from './children/BaseInfo.vue'
import SongLists from '../../components/common/song-list/SongList.vue'
import { playMusic } from '../../mixin/global/play-music'
import Comment from '../../components/common/comment/comment.vue'
export default {
  name: 'MusicListDetail',
  components: { BaseInfo, SongLists, Comment },
  data() {
    return {
      id: null, // 唯一值
      time: null, // 时间戳
      baseInfo: {},
      activeName: 'music',
      commentCount: null, // 评论数量
      musicList: [], // 歌曲信息
      lines: [true, true, true, true, true, true],
      offset: 1, // 分页
      limit: 30, // 取出评论数量
      commentList: [], // 评论列表
      total: null,
      subscribeList: [], // 收藏者列表
      joinSubscribe: 1, // 是否收藏歌单
      commnetType: 2 // 发送那种类型
    }
  },
  mixins: [playMusic],
  created() {
    const { id, time } = this.$route.params
    this.id = parseFloat(id)
    this.time = time
    if (this.id && this.time) {
      this.initData()
    }
  },
  methods: {
    // 获取歌曲详情数据
    async initData() {
      this.commentInfo()
      const res = await _getMusicDetail(this.id)
      // 保存歌单信息
      this.baseInfo = new BaseObj(res.data && res.data.playlist)
      // 获取评论数
      const commStr = res.data.playlist.commentCount
      this.commentCount = '评论(' + commStr + ')'

      // 获取歌曲列表
      const songList = res.data.playlist.tracks
      // 进行加工处理
      songList.forEach((item) => {
        _getSongsDetail(item.id).then((res) => {
          const songRes = new SongDetail(res.data.songs[0])
          this.musicList.push(songRes)
        })
      })
    },
    async commentInfo() {
      // 获取评论列表
      const commentRes = await _getCommentRes(this.id, this.limit, this.offset)
      this.commentList = commentRes.data.comments
      this.total = commentRes.data.total

      // 获取歌单收藏者
      const collectRes = await _getPlaylistSubscribes(this.id, this.limit)
      this.subscribeList = collectRes.data.subscribers
    },
    // 分页
    handleCurrentChange(pageCount) {
      this.offset = pageCount
      this.commentInfo()
    },
    // 发起收藏
    collector() {
      _getSubscribe(this.joinSubscribe, this.id).then((res) => {
        if (res.data.code == 200) {
          this.$message.success('收藏成功')
        }
      })
    }
  },
  watch: {
    $route() {
      if (this.$route.path.indexOf('musiclistdetail') > 0) {
        this.initData()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.music_detail {
  width: 90%;
  height: 100%;
  padding-top: 20px;
  margin: 0 auto;
  .music_tabs {
    margin-top: 20px;

    .pagination {
      padding-top: 20px;
    }
    .sub_main {
      width: 100%;
      ul {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        list-style: none;
        .sub_li {
          width: 10%;
          font-size: 12px;
          padding: 10px 0;
          display: flex;
          flex-direction: column;
          align-items: center;
          .sub_name {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
            overflow: hidden;
            padding-top: 8px;
          }
        }
      }
    }
  }
}
</style>
